<template>
  <div :id="echarts" ref="echarts" class="echarts" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: ['data'],
  computed: {
    echarts() {
      return 'echarts' + (Math.random() * 100000).toFixed(0)
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (JSON.stringify(this.data) !== '{}') {
        this.drawEcharts(this.data)
      }
    })
  },
  watch: {
    data(newValue, oldval) {
      this.drawEcharts(newValue)
    },
  },

  methods: {
    // 基于准备好的dom，初始化echarts实例
    drawEcharts(val) {
      const myChart = echarts.init(document.getElementById(this.echarts))
      myChart.clear()
      let img =
        ''
      let tableata = [
        { value: 23, name: '高度调整' },
        { value: 27, name: '雷达识别' },
        { value: 33, name: '速度调整' },
        { value: 9, name: '航向调整' },
        { value: 9, name: '联系频率' },
        { value: 9, name: '其他' },
      ]
      let borderdata = []
      for (var i = 0; i < 30; i++) {
        borderdata.push(
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
            },
          },
          {
            value: 1,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: '#2E475F',
                borderWidth: 0,
              },
            },
          },
        )
      }
      let colorList = [
        '#FF6C40',
        '#26294C',
        '#51B4FF',
        '#3573E5',
        '#2CD9C5',
        '#FECA1E',
      ]
      myChart.setOption({
        title: {
          text: '指令类别',
          left: '19%',
          top: '47%',
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
        },
        // 图片
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 20,
                height: 20,
              },
              left: '23.5%',
              top: '35%',
            },
          ],
        },
        // grid: {
        //     bottom: 150,
        //     left: 0,
        //     right: '10%',
        // },
        legend: [
          {
            x: '50%',
            y: '30%',
            icon: 'circle',
            orient: 'vertical',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
            data: ['高度调整', '雷达识别', '速度调整'],
          },
          {
            x: '70%',
            y: '30%',
            icon: 'circle',
            orient: 'vertical',
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
            data: ['航向调整', '联系频率', '其他'],
          },
        ],

        series: [
          // 主要展示层的
          {
            radius: ['55%', '81%'],
            center: ['25%', '50%'],
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                },
              },
            },
            label: { show: false },
            labelLine: {
              show: false,
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },

            data: tableata,
          },
          // 边框的设置
          {
            radius: ['75%', '81%'],
            center: ['25%', '50%'],
            type: 'pie',
            label: {
              show: false,
            },
            hoverAnimation: false,
            animation: false,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.2)',
              },
            },
            data: [
              {
                value: 0,
              },
            ],
          },
          // 内边框
          {
            name: '',
            type: 'pie',
            clockWise: false,
            radius: ['48%', '51%'],
            center: ['25%', '50%'],
            hoverAnimation: false,
            label: {
              show: false,
            },
            hoverAnimation: false,
            animation: false,
            tooltip: {
              show: false,
            },

            data: borderdata,
          },
        ],
      })
      window.addEventListener('resize', () => myChart.resize(), false)
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  justify-content: center;
}
</style>
